<template>
  <div
    class="mask"
    @click="noMask"
    v-show="isMask"
    ref="mask"
  >
    <img
      class="tilt-in-fwd-tl"
      :src="bigPicture"
      alt=""
    />
  </div>
</template>

<script>
export default {
  props: {
    bigPicture: {
      type: String
    },
    isMask: {
      type: Boolean
    }
  },
  methods: {
    enlarge() {
      this.$refs.mask.style.opacity = 0
      setTimeout(() => {
        this.$refs.mask.style.opacity = 1
      })
    },
    noMask() {
      this.$refs.mask.style.opacity = 0
      setTimeout(() => {
        this.$emit('changeMaskState')
      }, 600)
    }
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 480px) {
  body .mask img {
    width: 100%;
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(62, 62, 62, 0.7);
  z-index: 99999;
  transition: 0.4s ease-in-out;

  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
  -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  color: rgba(255, 255, 255, 0.3);
  img {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    // transform: translate(-50%, -50%);
  }
}
.mask::before {
  content: '';
  backdrop-filter: blur(80px);
  z-index: -3;
  margin: -30px;
  background-color: rgba(31, 33, 41, 0.4);
  // background-blend-mode: screen;
  // background-attachment: fixed;
  // background-position: center top;
  // background-size: cover;
}

.tilt-in-fwd-tl {
  animation: tilt-in-fwd-tl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes tilt-in-fwd-tl {
  0% {
    transform: rotateY(-20deg) rotateX(35deg) translate(-100%, -100%)
      skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0) rotateX(0deg) translate(-50%, -50%) skew(0deg, 0deg);
    opacity: 1;
  }
}
</style>
